<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.min.js"></script>
</head>
<body>

<style>
    *{margin:0 ;padding:0;}
    li{
        width:100%;height:30px;line-height:30px;
    }

    li.index{
        background:#999;color:red;
    }

    .router-link-active{
        color:red;
    }

    .left{
        float:left;width:200px;
    }
    .right{
        float:left;width:800px;
    }
</style>

<div class="box">
    <div class="left" style="height:3000px;">
        <ul class="clearfix">
            <router-link to="/home" tag="a" active-class="index">主页</router-link>
            <router-link to="/nav1" tag="li">导航1</router-link>
            <router-link to="/nav2" tag="li">导航2</router-link>
            <router-link to="/nav3" tag="li">导航3</router-link>
            <router-link to="/nav4" tag="li">导航4 重定向到nav1</router-link>
        </ul>
    </div>
    <div class="right">
        <router-view></router-view>
    </div>
</div>

<template id="home">
    <div>这是home的内容</div>
</template>

<template id="nav1">
    <div style="height:1000px;width:200px;">nav1</div>
</template>

<template id="nav2">
    <div>nav2</div>
</template>

<template id="nav3">
    <div>nav3</div>
</template>

<script>
    var Home={
        template:home
    };

    var Nav1={
        template:nav1,
        beforeRouteLeave:function(to,from,next){
            var answer = window.confirm('确定要离开nav1吗');
            if (answer) {
                next()
              } else {
                next(false)
              }
        },
        beforeRouteEnter:function(to, from, next) {
            console.log("beforeRouteEnter");
            next(function(vm){
                console.log('beforeRouteEnter-vm',vm)
                console.log(vm.$data)
            });
        },
        beforeRouteUpdate:function(to, from, next){
            console.log("跳转前111");
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
        }
    };

    var Nav2={
        template:nav2,
    };

    var Nav3={
        template:nav3
    };

    var routes  = [
       
        {   //设置默认路由
            path:'/', 
            name:'主页',
            redirect:'/home',
        },
        {  //默认路由 或者说/home路由对应的模板
            path:'/home', 
            name:'home',
            component:Home
        },
        {   
            path:'/nav1',
            component:Nav1,
            name:'nav1',
            beforeEnter:function(to, from, next){  
              console.log('beforeEnter',to);
              next();
            }
        },
        {path:'/nav2',component:Nav2},
        {path:'/nav3',component:Nav3},
        {path: '/nav4', redirect: '/nav1'}
    ]

    var router = new VueRouter({
//        linkActiveClass:'active',
//        mode:"history",   部署到服务器需要 服务器配置 可以查看https://router.vuejs.org/zh-cn/essentials/history-mode.html
        routes : routes,
        scrollBehavior:function(to, from, savedPosition){  //滚动行为
            console.log(11)
            if (savedPosition) {
                return savedPosition
            } else {
                return { x: 0, y: 0 }
            }
        }
    })

    router.beforeEach((to, from, next) => {  
          console.log('beforeEach',to);
          next();
    }) 

    

    router.afterEach ((to, from) => {  
       console.log('afterEach',to);

    }) 

    

    var vm = new Vue({
        el:'.box',
        data:{
            msg:'111'
        },
        router:router,
        methods:{

        }
    })


    /*路由懒加载 --- 参考： http://www.cnblogs.com/HtmlCss3/p/6410521.html*/

    /*import Vue from 'vue'
    import Router from 'vue-router'

    Vue.use(Router)

    export default new Router({
            routes: [
                {
                    path: '/',
                    component: resolve => require(['components/Hello.vue'], resolve)
        },
        {
            path: '/about',
            component: resolve => require(['components/About.vue'], resolve)
    }
    ]
    })*/

    /*
        1、增加默认路劲 不管后缀是什么都跳转一个路劲
        2、路由跳转，参数的传递
        3、跳转前验证登录https://segmentfault.com/q/1010000007580411
    */

</script>

</body>
</html>